<template>
  <div>
    <el-timeline class="animate__animated animate__fadeInLeft">
      <el-timeline-item :color="item.borderColor" v-for="(item,index) in list" :key="index"
                        :timestamp="item.createTime| dateFormat" placement="top">
        <el-card style="letter-spacing: 1px;" :style="calcuteStyle(item)">
          <h2 v-if="item.title">{{ item.title }}</h2>
          <div class="typo" v-html="item.html"></div>
          <el-image v-if="item.image" :src="item.image"></el-image>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <div style="background-color:#ffffff33;">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reqEssayList } from '../../api/touristApi'

const defQuery = () => {
  return {
    pageNum: 1,
    pageSize: 20
  }
}
export default {
  data() {
    return {
      list: [],
      queryParams: defQuery(),
      total: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      reqEssayList(this.queryParams).then(data => {
        this.list = data.list
        this.total = data.total
        // this.list.forEach((essay) => {
        //   essay.content = this.$marked(essay.content)
        //   essay.borderColor = essay.color.split(",")[0] + ',' + essay.color.split(",")[1] + ',' + essay.color.split(",")[2] + ')'
        //   essay.contentColor = essay.color.split(",")[0] + ',' + essay.color.split(",")[1] + ',' + essay.color.split(",")[2] + ',0.1)'
        // })
      })
    },
    handleCurrentChange(newSize) {
      this.queryParams.pageNum = newSize
      this.getList()
    },
    handleSizeChange(newSize) {
      this.queryParams.pageSize = newSize
      this.getList()
    },
    calcuteStyle(essay) {
      return 'border: 3px solid ' + essay.borderColor + '; background-color: rgba(255,255,255,0.9);box-shadow: 0 0 30px -10px ' + essay.borderColor
    }
  }
}
</script>

<style scoped lang="less">

.el-timeline {
  font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif !important;

  width: 80%;
  margin: 0 auto;

  .el-image {
    width: 200px;
  }

  .el-card {
    border-radius: 20px;
    box-shadow: 0 0 15px 5px white;
  }
}

@media screen and (max-width: 768px) {
  .el-timeline {
    width: 98%;
    padding: 2px;
  }

  .el-timeline /deep/ .el-timeline-item__wrapper {
    padding-left: 15px !important;
  }
}
</style>
